<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template #filter-content>
        <course-select v-model="listQuery.params.courseId" title="选择课程" />
        <el-input v-model="listQuery.params.title" placeholder="问题标题/内容" style="width: 200px;" class="filter-item" size="small"/>
        <el-select v-model="listQuery.params.state" placeholder="选择回复状态" class="filter-item" size="small">
          <el-option value="" label="全部">全部</el-option>
          <el-option value="0" label="待回复">待回复</el-option>
          <el-option value="1" label="已回复">已回复</el-option>
        </el-select>
      </template>

      <template #data-columns>

        <el-table-column
          label="所属课程"
          prop="courseId_dictText"
          show-overflow-tooltip
        />

        <el-table-column
          label="所属课件"
          prop="fileId_dictText"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          label="提问人"
          prop="createBy_dictText"
          align="center"
        />

        <el-table-column
          label="问题内容"
          prop="title"
          align="center"
          show-overflow-tooltip
        >

          <template v-slot="scope">
            <detail-link :id="scope.row.id" :title="scope.row.title" permission="course:qa:answer" @click="handlePreview" />
          </template>

        </el-table-column>

        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
        />

        <el-table-column
          label="回复状态"
          align="center"
        >

          <template v-slot="scope">
            <span v-if="scope.row.state===1">已回复</span>
            <span v-else>待回复</span>
          </template>

        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
        >

          <template v-slot="scope">
            <el-link v-permission="['course:qa:answer']" type="primary" icon="el-icon-chat-dot-round" @click="handlePreview(scope.row.id)">查看&回复</el-link>
          </template>

        </el-table-column>

      </template>

    </data-table>

    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" title="问题详情" width="50%">

      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="120px">

        <el-form-item label="问题内容">
          <div v-html="$options.filters.formatRichText(previewData.content)" />
        </el-form-item>

        <el-form-item label="问题答复">
          <Tinymce ref="editor" v-model="postForm.content" height="20vh" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="handleSave">提交回复</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import { saveData, fetchDetail } from '@/api/course/qa'
import CourseSelect from '@/components/CourseSelect'
import Tinymce from '@/components/Tinymce'
import permission from '@/directive/permission/index.js'
import DetailLink from '@/components/DetailLink' // 权限判断指令

export default {
  directives: { permission },
  components: { DetailLink, Tinymce, CourseSelect, DataTable },
  data() {
    return {

      dialogVisible: false,
      loading: false,
      postForm: {

      },

      rules: {

        title: [
          { required: true, message: '课件名称不能为空！' }
        ],

        content: [
          { required: true, message: '回复内容不能为空！' }
        ]
      },

      listQuery: {
        current: 1,
        size: 10,
        params: {
          courseId: null,
          catId: null
        }
      },

      options: {

        delete: {
          enable: true,
          permission: 'course:qa:delete',
          url: '/api/course/qa/delete'
        },
        // 可批量操作
        multi: true,
        // 列表请求URL
        listUrl: '/api/course/qa/paging'
      },
      previewData: {}
    }
  },

  created() {

  },

  methods: {

    handleSave() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        this.loading = true

        saveData(this.postForm).then(() => {
          this.$message({
            type: 'success',
            message: '回复成功！'
          })
          this.dialogVisible = false
          this.$refs.pagingTable.getList()
          this.loading = false
        })
      })
    },

    handlePreview(id) {
      this.dialogVisible = true
      this.previewData = {}
      this.postForm = {}
      fetchDetail(id).then(res => {
        this.previewData = res.data
        this.postForm.title = `回复：${res.data.title}`
        this.postForm.replyId = this.previewData.id
        this.postForm.id = ''
        this.postForm.content = ''
        this.$refs.editor.setContent('')
        const replies = res.data.replyList
        if (replies != null && replies.length > 0) {
          this.postForm.id = replies[0].id
          this.postForm.content = replies[0].content
          this.$refs.editor.setContent(this.postForm.content)
        }
      })
    },

    closePreview() {
      this.previewData = {}
    }
  }
}
</script>
